Fix Power Flow and Console responsive layout by erikgieseler · Pull Request #205 · jasonacox/pypowerwall-server

erikgieseler · 2026-11-11T18:56:45Z

Summary

Fixes five responsive/display issues in the Power Flow and Console views:

Low battery SoE label: Values such as 4% were cut off at the bottom of the Power Flow card. The label now bottom-aligns inside the battery graphic only when it would otherwise overflow.
Grid/home Power Flow labels on narrow cards: The labels were anchored to the diagram edges, so the right-hand label ran outside the card. Both are now centered over their respective icons, and the two circles move closer together on narrow iframes.
Gateway mode/firmware on narrow Console cards: Long firmware values wrapped inside the badge and squeezed the connection status. The badges stay readable, the status sits with the host/IP line, and gateway cards keep enough width when multiple gateways share a row.
MQTT and control status pills: The Connected and Control enabled labels were mathematically inside the pill but sat slightly low optically. They now use a centered flex line box.
Gateway tags and active header link: The mode/firmware tags and the active header link had the same small font-metric offset; their text is now optically centered.

Screenshots

All pairs were captured with Playwright/Chrome at 2x device scale from actual source: before uses d680c92, after uses the UI source from this branch. git diff d680c92..9f1879c -- app/static/index.html app/static/css/page.css app/static/powerflow/app.js is empty, so the before screenshots also match base 9f1879c for the files involved. Power Flow used fixed API responses: one frozen aggregates response for both sides, SoE 4% for the 1400px (624px iframe) SoE pair, and SoE 50% for the 380px (306px iframe) label pair so the screenshots isolate the label layout. Gateway screenshots used the same fixed gateway/version payloads for both sides, with the actual old/new CSS from index.html at 380px and 1200px. The MQTT/control pill and active-header screenshots use the same live page data with the actual old/new CSS at 1400px.

Power Flow battery SoE at 4%

Before	After

Power Flow at 380px

Before	After

Gateway details at 380px

Before	After

Two gateways

Before at 1200px	After at 1200px

Before at 380px	After at 380px

Status pills

MQTT before	MQTT after

Control before	Control after

Active header link

Before	After

Testing

node --check app/static/powerflow/app.js
Targeted tests: tests/test_powerflow_api_base.py, tests/test_console_escaping.py, tests/test_api_md.py - 16 passed.
Full suite with PYTHONUTF8=1 python -m pytest -q: 1362 passed, 1 skipped, 3 pre-existing environment-specific failures that also reproduce on base upstream/main 9f1879c:
- test_battery_dispatch_ui: Windows/German number formatting (5.000 vs 5,000)
- test_https: Windows path separator (\ vs /)
- test_legacy_mode_parity: depends on local gateway environment configuration
Manual Playwright checks at 380px: grid/home label centers match the icon centers (42px and 264px), the right-hand rendered text stays inside the 306px card in the captured run, and the gateway firmware stays on one line.
SoE label at 4%: the actual old code clipped the label box at 290.08px and the glyph at 287.23px against a 280px battery bottom; the new code has both label and glyph bottoms at exactly 280px (gap 0px).
Power Flow labels at 380px: old labels had centers 60px/302px and the right label box ended at 362px against a 306px card; new containers are centered at the icon centers 42px/264px after the diagram shrinks.
Single gateway at 380px: old card height was 121px, firmware badge 36px, and the status was below the name; new card is 101px, keeps the firmware badge at 20px, and puts the status in the same CSS grid row as the host/IP, centered by align-items: center without a fixed vertical offset.
Two-gateway Playwright checks: at 380px both cards stack with 20px-high firmware badges; at 1200px the new grid uses two columns (547px cards) and both firmware badges stay on one line. The old 3-column layout squeezed the first card to 359.33px and wrapped its firmware to 36px.
MQTT/control pills at 2x: the old text ink center was 24px against a pill center of 22.5px (visibly low); the new ink center is 22px with equal flex centering.
Active header link at 2x: old ink center 38.5px vs box center 36.5px; new ink center is exactly 36.5px.
Gateway mode/firmware tags at 2x: old ink centers 21px/20.5px vs box center 19.5px; new centers are 19px/18.5px.
Power Flow browser matrix: 209 combinations (11 widths x 19 SoE values) with the actual app.js and fixed API payloads. No failures: labels stayed inside, the circles stayed within the iframe, and low SoE text remained bottom-aligned. Resize checks from 380 -> 600 -> 320 px also updated the diagram width live.

Keep the low-SoE label inside the battery graphic, center grid/home labels, keep gateway details readable with multiple gateways, and optically center status pills, gateway tags, and the active header link.

Copilot

🟡 Changes recommended

Long hostnames or gateway IDs can overflow narrow gateway cards and overlap the connection status because .gateway-host lacks a rule to break long text.

1 open issue

Prevent long gateway hosts from overlapping status · New

What changed in this PR

Improves responsive layout and text alignment in the Power Flow and Console views, with shared header styling also applying to History.

Changes:

Keeps low-charge battery percentages visible and centers Power Flow labels over icons on narrow cards.
Reworks gateway cards to improve badge readability and place connection status beside host information.
Adjusts status-pill, badge, and navigation text alignment.

File	Description
`RELEASE.md`	Documents the display fixes under the upcoming release.
`app/static/powerflow/app.js`	Adds responsive diagram sizing and updates power and battery label positioning.
`app/static/index.html`	Revises gateway-card layout and aligns status pills and badges.
`app/static/css/page.css`	Centers shared header-link text for Console and History.

_{Review effort: Balanced}

jasonacox · 2026-11-12T07:03:02Z

Thanks @erikgieseler! This is a great cleanup, and the before/after screenshots and measurements made it easy to review.

I tested it against the pwsimulator from 320 to 1400px, and it holds up:

Console: nothing overflows sideways at any width, and the firmware badges stay on one line (20px), with one gateway and with two.
Power Flow: the grid and home labels stay inside the card and are centered over their icons at every width.
Battery label: at 0%, 1%, 4%, 8% and 12% it now sits inside the battery. main clips it at both 0% and 4%.
With main merged in, all 1367 tests pass.

A few small things before it can merge:

Merge main: RELEASE.md conflicts with fix(api): /pod status flags null when the gateway has no value #206, which also added the [0.16.1] - Upcoming section. Keep both entries under Fixed.
Long hostnames (Copilot's finding): I confirmed it. At 320px, a long hostname or IPv6 address in .gateway-host runs into the Connected status. Adding overflow-wrap: anywhere (as .gateway-name has) wraps it inside its column. I checked that in the browser.
app.js: viewportWidth: V0 is never used, because setState already triggers the re-render, so it can go.
app.js: please add a short comment saying what the 136 in window.innerWidth - 136 reserves.

Would you like to do these yourself, or would you like us to push them to your branch? Either is fine with me. Just let me know.

erikgieseler · 2026-11-12T07:07:06Z

Feel free to make the changes yourself if you have the time. I won't be able to get to it until this evening at the earliest.

- .gateway-host wraps long hostnames and IPv6 addresses inside its column instead of running into the connection status on narrow cards (Copilot) - drop the unused viewportWidth destructure; setState already re-renders - explain the 136px reserved beside the diagram for the grid/home circles Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

jasonacox · 2026-11-12T07:30:11Z

Thanks @erikgieseler! I pushed the four changes to your branch:

23120a6 merges main, keeping both entries under 0.16.1 Fixed.
572db95 makes .gateway-host wrap long hostnames and IPv6 addresses (the Copilot finding), drops the unused V0, and adds a comment on the 136: it keeps 68px on each side for the grid and home circles, which sit outside the diagram's edges.

All 1367 tests pass. I re-checked it against the simulator at 320px: hostnames stay in their column, Power Flow renders, and the console shows no errors. Let me know if you'd like anything done differently.

Copilot

🟢 Approval recommended

No active review issues remain for the responsive layout and text-alignment changes.

No open issues 🎉

1 resolved since last review

Prevent long gateway hosts from overlapping status

_{Review effort: Balanced}

fix: improve Power Flow and Console responsive layout

016b779

Keep the low-SoE label inside the battery graphic, center grid/home labels, keep gateway details readable with multiple gateways, and optically center status pills, gateway tags, and the active header link.

jasonacox requested a balanced review from Copilot November 12, 2026 05:55

Copilot started reviewing on behalf of jasonacox November 12, 2026 05:55

View session

Copilot AI reviewed Nov 12, 2026

View reviewed changes

Comment thread app/static/index.html Resolved

jasonacox and others added 2 commits November 11, 2026 23:21

Merge main into fix/powerflow-console-mobile

23120a6

jasonacox requested a balanced review from Copilot November 12, 2026 07:30

Copilot started reviewing on behalf of jasonacox November 12, 2026 07:30

View session

Copilot AI reviewed Nov 12, 2026

View reviewed changes

jasonacox merged commit 70f8b23 into jasonacox:main Nov 12, 2026
10 checks passed

Navigation Menu

Repository navigation

Fix Power Flow and Console responsive layout - #205

Fix Power Flow and Console responsive layout#205
jasonacox merged 3 commits into
jasonacox:mainfrom
erikgieseler:fix/powerflow-console-mobile

erikgieseler commented Nov 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

jasonacox commented Nov 12, 2026

Uh oh!

erikgieseler commented Nov 12, 2026

Uh oh!

jasonacox commented Nov 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

erikgieseler commented Nov 11, 2026

Summary

Screenshots

Power Flow battery SoE at 4%

Power Flow at 380px

Gateway details at 380px

Two gateways

Status pills

Active header link

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

jasonacox commented Nov 12, 2026

Uh oh!

erikgieseler commented Nov 12, 2026

Uh oh!

jasonacox commented Nov 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants